<template>
  <div id="app">
    <div>
      <van-notice-bar
        left-icon="volume-o"
        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
      />
      <van-image
        width="250"
        height="250"
        :src="'https://localhost:5001/WeChat/code.jpg'"
      />
    </div>
    <div class="content">
      <van-form @submit="onLogin">
        <van-field
          label="用户名:"
          placeholder="请输入用户名"
          v-model="loginForm.account"
          type="tel"
          :rules="[{ required: true }]"
        />

        <van-field
          v-model="loginForm.password"
          clearable
          type="password"
          label="密码:"
          placeholder="请输入密码"
          :rules="[{ required: true }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
        <div style="margin: 16px">
          <van-button round block to="/userAdd">注册</van-button>
        </div>
        <div style="margin: 16px">
          <van-radio-group v-model="checked" @change="changeFn">
            <van-radio name="1" @click="clickFn">
              勾选表示您已同意<a class="text-link" style="color: blue"
                ><u>《用户服务协议》</u></a
              >和<a class="text-link" style="color: blue"
                ><u>《个人信息保护政策》</u></a
              ></van-radio
            >
          </van-radio-group>
        </div>
      </van-form>
      <div>
        <van-row type="flex" justify="space-between">
          <van-col span="9">
            <van-button type="primary" to="/" size="small">微信登录</van-button>
          </van-col>
          <van-col span="9">
            <van-button type="default" to="/resetting" size="small"
              >忘记密码</van-button
            >
          </van-col>
        </van-row>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import { loginApi } from "@/api/user.js";

export default {
  data() {
    return {
      loginForm: {
        account: "",
        password: "",
        validateCode: "11",
      },
      checked: "",
      checkRadioFlag: false,
    };
  },
  methods: {
    //登录
    onLogin() {
      if (this.checkRadioFlag == false) {
        Dialog.confirm({
          title: "提示",
          message: "请同意《用户服务协议》和《个人信息保护政策》",
        })
          .then(() => {})
          .catch(() => {
            // on cancel
          });
        return;
      }
      //登录
      loginApi(this.loginForm).then((res) => {
        if (res.code == 200) {
          Toast({
            message: res.message,
            forbidClick: true,
          });
          window.localStorage.setItem("user", res.token);
          this.$router.push("/");
        }
      });
    },
    //单选框用户协议的选中与取消
    clickFn() {
      if (this.checkRadioFlag) {
        this.checked = "";
      }
      this.checkRadioFlag = true;
    },
    //单选框用户协议的选中与取消
    changeFn() {
      this.checkRadioFlag = false;
    },

    //微信登录
    weChatLogin() {
      console.log("微信登录");
    },
    //忘记密码
    forgotPassword() {},
  },
};
</script>


<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
.content {
  font-size: 24px;
  line-height: 2;
  padding-top: 50px;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 200px;
  text-align: center;
}
</style>
